<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
    body {background:black; text-align: center;}
    #c1 {background:#FFF}
    </style>
    <script>
    window.onload=function (){
      let oC=document.getElementById('c1');
      let gd=oC.getContext('2d');

      let g1={l: 100, t: 100, w: 200, h: 150, r: 0};
      let g2={l: 50, t: 80, w: 100, h: 350, r: 0};

      requestAnimationFrame(next);

      function next(){
        gd.clearRect(0,0,oC.width,oC.height);

        g1.r++;
        gd.save();                      //保存：canvas的状态（图形并不保存）——颜色、translate、rotate
        gd.translate(g1.w/2+g1.l, g1.h/2+g1.t);
        gd.rotate(g1.r*Math.PI/180);

        gd.strokeRect(-g1.w/2, -g1.h/2, g1.w, g1.h);
        gd.restore();                   //恢复：恢复到上一次保存的状态


        g2.r--;
        gd.save();                      //保存：canvas的状态（图形并不保存）——颜色、translate、rotate
        gd.translate(g2.w/2+g2.l, g2.h/2+g2.t);
        gd.rotate(g2.r*Math.PI/180);

        gd.strokeRect(-g2.w/2, -g2.h/2, g2.w, g2.h);
        gd.restore();                   //恢复：恢复到上一次保存的状态
        requestAnimationFrame(next);
      }
    };
    </script>
  </head>
  <body>
    <canvas id="c1" width="800" height="600"></canvas>
  </body>
</html>
